<template>
	<view>
		<view class="nav_bar">
			<image class="image-bg" :src="ImageUrl + '/1/dzqb-bg.png'" mode=""></image>
			<view class="box-text">
				<view class="title">
					账户余额
				</view>
				<view class="price">
					<view class="num" v-if="type == '1'">
						<view style="font-size: 30rpx;">电费￥</view>
						<view class="text">{{info.balance || 0}}</view>
					</view>
					<view class="num">
						<view style="font-size: 30rpx;">服务费￥</view>
						<view class="text">{{info.serviceFee || 0}}</view>
					</view>
				</view>
				<view class="tips">
					提现操作请前往站长后台处理
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card">
				<view class="title">
					收支明细
				</view>
				<view class="list">
					<view class="item items-center justify-between" v-for="item in dataList" :key="item.id">
						<view class="left">
							<view class="no">
								{{item.num}}
							</view>
							<view class="time">
								消费时间：{{item.createDate}}
							</view>
						</view>
						<view class="right">
							{{item.type == '2' ? '-' : '+'}}{{item.money}}
						</view>
					</view>
				</view>
				<u-empty v-if="dataList.length < 1" text="数据为空" mode="list"></u-empty>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo:1,
				dataList:[],
				last:1,
				info:{},
				type:'1'
			};
		},
		onLoad(e) {
			if(e.type) this.type = e.type
			this.listFn()
		},
		onReachBottom() {
			this.last > this.pageNo ? (this.pageNo++,this.listFn()) : ''
		},
		onPullDownRefresh() {
			this.listFn()
		},
		methods:{
			async listFn(){
				let data = {
					uid:uni.getStorageSync('uid'),
					pageNo:this.pageNo,
					pageSize:10
				}
				let res = await this.$request('user/zz-record',data,{ showLoading: true })
				uni.stopPullDownRefresh()
				if(res.result == '0'){
					this.last = res.data.last
					this.info = res
					this.pageNo > 1 ? this.dataList = this.dataList.concat(res.data.list) : this.dataList = res.data.list
				}else{
					this.$util.msg(res.resultNote);
				}
			}
		},
	}
</script>

<style lang="scss" scoped> 
	.nav_bar{
		padding: 40rpx 50rpx;
		.image-bg{
			width: 100%;
			height: 356rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.box-text{
			position: relative;
			z-index: 99;
			.title{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BDBFD4;
			}
			.price{
				margin-top: 10rpx;
				.num{
					width: 100%;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FCFDFE;
					display: flex;
					align-items: baseline;
					.text{
						font-size: 60rpx;
						width: 100%;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
					}
				}
			}
			.tips{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	.content{
		position: relative;
		z-index: 99;
		padding: 20rpx;
		transform: translateY(-30rpx);
		.card{
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx;
		}
		.title{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.list{
			margin-top: 30rpx;
			.item{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E7E7E7;
				margin-bottom: 20rpx;
				.left{
					.no{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 43rpx;
					}
					.time{
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #999999;
						line-height: 43rpx;
					}
				}
				.right{
					font-size: 32rpx;
					font-family: DIN;
					font-weight: bold;
					color: #2B2B2B;
				}
			}
		}
	}
</style>
